<template>
  <div class="academic-db-container">
    <!-- 搜索栏 -->
    <div class="search-bar">
      <el-input
        v-model="keyword"
        placeholder="请输入数据库名称进行搜索"
        prefix-icon="el-icon-search"
        clearable
        class="search-input"
      ></el-input>
    </div>

    <!-- 数据库卡片列表 -->
    <div class="db-grid">
      <el-card
        v-for="(item, i) in filteredData"
        :key="i"
        shadow="hover"
        class="db-card"
        @click.native="viewsche(i)"
      >
        <div class="card-header">
          <span class="db-id">ID: {{ item.dbid }}</span>
          <!-- 删除按钮 -->
          <el-button
            type="text"
            icon="el-icon-delete"
            class="delete-btn"
            @click.stop="confirmDelete(item.dbid)"
          >
            删除
          </el-button>
        </div>

        <div class="card-body">
          <h3 class="db-name">{{ item.dbname }}</h3>
          <div class="metadata">
            <div class="meta-item">
              <i class="el-icon-folder-opened"></i>
              <span>创建时间: {{ formatDate(item.createtime) }}</span>
            </div>
          </div>
        </div>

        <div class="card-footer">
          <el-button
            type="text"
            icon="el-icon-view"
            class="view-btn"
          >
            查看详情
          </el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import { alldb, deletedb } from '@/api/db';

export default {
  name: 'AcademicDBList',
  created() {
    this.read();
  },
  computed: {
    ...mapGetters(['token']),
    filteredData() {
      if (!this.keyword) return this.dbData;
      return this.dbData.filter(item =>
        item.dbname.toLowerCase().includes(this.keyword.toLowerCase())
      );
    }
  },
  data() {
    return {
      dbData: [],
      keyword: ''
    };
  },
  methods: {
    read() {
      alldb().then(response => {
        this.dbData = response.data.db.map(db => ({
          ...db,
          createTime: db.createTime || new Date().toISOString(),
          creator: db.creator || '系统'
        }));
      }).catch(error => {
        console.error('数据库加载失败:', error);
        this.$message.error('数据库加载失败');
      });
    },
    viewsche(i) {
      this.$store.dispatch('user/setDBId', this.dbData[i].dbid)
        .then(() => this.$router.push('/DBII/db'));
    },
    formatDate(dateStr) {
      if (!dateStr) return '未知';
      const date = new Date(dateStr);
      const dateString = date.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit'
      });
      const timeString = date.toLocaleTimeString('zh-CN', {
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
        hour12: false
      });
      return `${dateString} ${timeString}`;
    },
    confirmDelete(dbid) {
      this.$confirm('是否确认删除该数据库？', '确认删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 调用删除接口
        
        deletedb(dbid).then(response => {
          this.$message.success('数据库删除成功');
          // 重新加载数据库列表
          this.read();
        }).catch(error => {
          console.error('删除失败:', error);
          this.$message.error('删除失败');
        });
      }).catch(() => {
        // 用户取消删除
        this.$message.info('已取消删除');
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.academic-db-container {
  padding: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.search-bar {
  margin-bottom: 30px;

  .search-input {
    max-width: 400px;

    ::v-deep .el-input__inner {
      border-radius: 20px;
      padding-left: 40px;
      background-color: #f5f7fa;
      border: 1px solid #e4e7ed;
    }
  }
}

.db-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.db-card {
  border-radius: 8px;
  transition: all 0.3s ease;
  background-color: #ffffff;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;

    .db-id {
      font-size: 14px;
      color: #909399;
    }

    .delete-btn {
      color: #f56c6c;
      font-size: 14px;

      &:hover {
        color: #ff7875;
      }
    }
  }

  .card-body {
    .db-name {
      margin: 0 0 15px;
      font-size: 20px;
      color: #303133;
      font-weight: 600;
    }

    .metadata {
      .meta-item {
        display: flex;
        align-items: center;
        margin-bottom: 8px;
        font-size: 14px;
        color: #606266;

        i {
          margin-right: 8px;
          font-size: 16px;
          color: #409eff;
        }
      }
    }
  }

  .card-footer {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #ebeef5;

    .view-btn {
      color: #409eff;
      font-weight: 500;

      &:hover {
        color: #66b1ff;
      }
    }
  }
}
</style>